<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- <view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<image src="/static/back.png" mode="aspectFit"></image>
				</view>
				<text class="title">预约成功</text>
			</view>
		</view> -->

		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 成功图标区域 -->
			<view class="success-section">
				<view class="success-icon-wrapper">
					<view class="success-bg">
						<image src="/static/images/对 拷贝@2x.png" class="success-img" mode="widthFix" alt="预约成功图标">
						</image>

					</view>
				</view>

				<!-- 成功提示文字 -->
				<view class="success-text">预约成功</view>
				<view class="success-subtitle">您的预约已提交，请等待确认</view>
			</view>

			<!-- 预约信息卡片 -->
			<view class="order-card">
				<view class="card-header">
					<view class="card-icon">🎫</view>
					<text class="card-title">预约信息</text>
				</view>
				<view class="order-info">
					<view class="info-row">
						<text class="info-label">预约编号</text>
						<text class="info-value">{{ orderNo }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">预约时间</text>
						<text class="info-value">2024-01-15 14:30</text>
					</view>
					<view class="info-row">
						<text class="info-label">服务门店</text>
						<text class="info-value">车百事汽车生活馆</text>
					</view>
				</view>
			</view>

			<!-- 按钮区域 -->
			<view class="button-group">
				<button class="primary-btn" @click="goHome">
					<view class="btn-content">
						<view class="btn-icon">🏠</view>
						<text>返回首页</text>
					</view>
				</button>
				<button class="secondary-btn" @click="viewDetails">
					<view class="btn-content">
						<view class="btn-icon">📋</view>
						<text>预约详情</text>
					</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				// 模拟生成的预约编号
				orderNo: '324252536363634'
			};
		},
		onLoad(options) {
			// 获取系统信息，计算状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;

			// 如果从预约页面传递了订单号，可以在这里接收
			if (options.orderNo) {
				this.orderNo = options.orderNo;
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 返回首页
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index' // 假设首页路径是这个
				});
			},
			// 查看预约详情
			viewDetails() {
				uni.navigateTo({
					url: `/pages/car-repair-model/appointmentdetail/appointmentdetail`
				});
			}
		}
	};
</script>

<style>
	.container {
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4ff 100%);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 自定义导航栏 */
	.custom-nav {
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
		color: #fff;
		box-sizing: border-box;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
		gap: 16rpx;
	}

	.back-icon {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		transition: transform 0.15s ease, background 0.2s ease;
	}

	.back-icon:active {
		transform: scale(0.96);
		background: rgba(255, 255, 255, 0.28);
	}

	.back-icon image {
		width: 40rpx;
		height: 40rpx;
		filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 1rpx;
		color: #fff;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
	}

	/* 主要内容区域 */
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx;
		text-align: center;
	}

	/* 成功区域 */
	.success-section {
		margin-bottom: 60rpx;
	}

	.success-icon-wrapper {
		margin-bottom: 32rpx;
	}

	.success-bg {
		width: 160rpx;
		height: 160rpx;
		background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 12rpx 32rpx rgba(34, 197, 94, 0.3);
		margin: 0 auto;
		animation: successPulse 2s ease-in-out infinite;
	}

	@keyframes successPulse {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}
	}

	.success-img {
		width: 130rpx;
		height: 130rpx;
		/* 	filter: brightness(0) invert(1); */
	}

	/* 成功提示文字 */
	.success-text {
		font-size: 40rpx;
		font-weight: 700;
		color: #1f2d3d;
		margin-bottom: 16rpx;
		letter-spacing: 1rpx;
	}

	.success-subtitle {
		font-size: 28rpx;
		color: #6b7a90;
		line-height: 1.5;
	}

	/* 预约信息卡片 */
	.order-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 60rpx;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
		width: 100%;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.card-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	.order-info {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f2f5;
	}

	.info-row:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 28rpx;
		color: #6b7a90;
		font-weight: 500;
	}

	.info-value {
		font-size: 28rpx;
		color: #1f2d3d;
		font-weight: 600;
	}

	/* 按钮组 */
	.button-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	/* 主要按钮 */
	.primary-btn {
		width: 100%;
		background: linear-gradient(90deg, #2a8cff 0%, #1c6bff 100%);
		color: #ffffff;
		border-radius: 38rpx;
		border: none;
		box-shadow: 0 12rpx 24rpx rgba(42, 140, 255, 0.32);
		transition: all 0.3s ease;
		overflow: hidden;
	}

	.primary-btn:active {
		transform: translateY(2rpx) scale(0.98);
		box-shadow: 0 8rpx 16rpx rgba(42, 140, 255, 0.28);
	}

	/* 次要按钮 */
	.secondary-btn {
		width: 100%;
		background: #ffffff;
		color: #6b7a90;
		border: 2rpx solid #e8ecf0;
		border-radius: 38rpx;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;
	}

	.secondary-btn:active {
		background: #f8f9fa;
		transform: translateY(2rpx) scale(0.98);
		border-color: #2a8cff;
		color: #2a8cff;
	}

	.btn-content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 28rpx 0;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}

	.btn-icon {
		font-size: 28rpx;
		transition: transform 0.3s ease;
	}

	.primary-btn:active .btn-icon,
	.secondary-btn:active .btn-icon {
		transform: scale(1.1);
	}
</style>